<template>
  <div>
    <div style="display: flex;justify-content: space-around;">
      <el-row>
        <el-col>
          <div class="grid-content bg-purple-dark">
            <el-table
                :data="tableData"
                highlight-current-row
                style="width: 100%"
                @current-change="handleCurrentChange">
              <el-table-column
                  label="角色"
                  prop="roleName"
                  width="800">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="block">
            <el-pagination
                :current-page=currentPage
                :page-size=pageSize
                :total=totalSize
                background
                layout="prev, pager, next"
                @current-change="currentPageFn">
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>


    <div style="display: flex;justify-content: center">
      <el-row style="margin-top: 50px">
        <el-button plain type="success" @click="addRole">添加新的角色</el-button>
        <el-button plain type="primary" @click="checkRole">查看角色权限</el-button>
        <el-button plain type="warning" @click="altRole">修改角色权限</el-button>
        <el-popover
            v-model="visible"
            placement="top"
            style="margin-left: 10px" width="160">
          <p>你确定要删除这个角色么</p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false">取消</el-button>
            <el-button size="mini" type="primary" @click="delRole">确定</el-button>
          </div>
          <el-button slot="reference" type="danger">删除角色</el-button>
        </el-popover>
      </el-row>
    </div>

    <el-dialog
        :visible.sync="showInfo"
        title="查看角色权限"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="角色名称">
          {{ currentRow.roleName }}
        </el-form-item>
        <el-form-item label="权限">
          <el-tag v-for="(item,i) in levelList" :key="i" style="margin: 5px" type="success">
            {{ item.levelName }}
          </el-tag>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
        :visible.sync="updateInfo"
        title="修改角色权限"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="角色名称">
          {{ currentRow.roleName }}
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item,i) in allLevList" :key="i" v-bind:label=item.levelId>
              {{ item.levelName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button plain type="success" @click="updateRole">确认更新</el-button>
      </el-form>
    </el-dialog>

    <el-dialog
        :visible.sync="addInfo"
        title="添加新角色"
        width="30%">
      <el-form label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="newRoleName" placeholder="名称" style="margin-top: 25px"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox-group v-model="checkList">
            <el-checkbox v-for="(item,i) in allLevList" :key="i" v-bind:label=item.levelId>
              {{ item.levelName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button plain type="success" @click="addNewRole">添加</el-button>
      </el-form>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "RoleManage",
  data() {
    return {
      tableData: [],
      totalSize: 0,//总行数
      pageSize: 0,//当前显示数据页
      currentPage: 0,//当前页码
      currentRow: 0,//当前选中列
      levelList: [],//权限列
      checkList: [],
      allLevList: [],
      showInfo: false,//角色权限展示
      visible: false,
      updateInfo: false,
      addInfo: false,
      newRoleName: ''
    }
  },
  mounted() {
    this.showPage()
    this.showAllLe()
  },
  methods: {
    handleCurrentChange(val) {
      //必须不为null才能进行跳转分页
      if (val != null) {
        this.currentRow = val;
      }
    },
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.showPage()
    },
    showPage() {
      let url = "api/role/showRoleByPage/" + this.currentPage
      this.axios.get(url).then(
          r => {
            this.tableData = r.data.records
            this.totalSize = r.data.total
            this.pageSize = r.data.size
          }
      )
    }, showAllLe() {
      this.axios.get("api/role/showAllLevel").then(r => {
        this.allLevList = r.data
      })
    }, addRole() {
      this.addInfo = true
    }, addNewRole() {
      if (this.newRoleName === "") {
        this.messageShow("无法修改", "未填写角色名称")
        return
      }
      if (this.checkList.length === 0) {
        this.messageShow("无法进行修改", "未选择要更新的权限")
        return
      }
      let url = "api/role/addRole/" + this.newRoleName + "/" + this.checkList
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
      })
      this.addInfo = false
      this.checkList = []
      this.showPage()
    }, checkRole() {
      if (this.currentRow === 0) {
        this.messageShow("无法查看", "还未选中行")
        return
      }
      this.showInfo = true
      console.log(this.currentRow)
      let url = "api/role/showRoleById/" + this.currentRow.roleId
      this.axios.get(url).then(r => {
        this.levelList = r.data.levelBeanList
      })
    }, altRole() {
      if (this.currentRow === 0) {
        this.messageShow("无法查看", "还未选中行")
        return
      }
      this.updateInfo = true

    }, updateRole() {
      if (this.checkList.length === 0) {
        this.messageShow("无法进行修改", "未选择要更新的权限")
        return
      }
      let url = "api/role/updateRoleById/" + this.currentRow.roleId + "/" + this.checkList
      this.axios.post(url).then(r => {
        this.messageShow("", r.data.info)
      })
      this.updateInfo = false
      this.checkList = []
    }, delRole() {
      if (this.currentRow === 0) {
        this.messageShow("无法删除", "还未选中行")
        return
      }
      this.axios.delete("api/role/delRoleById/" + this.currentRow.roleId).then(r => {
        this.messageShow("", r.data.info)
      })
      this.showPage()
    }, messageShow(title, message) {
      this.$notify({
        title: title,
        message: (message)
      });
    }
  }
}
</script>

<style scoped>

</style>